<template>
  <div>
    <el-select
      v-model="labelnames"
      :label="labelnames"
      placeholder="请选择"
      :multiple="multiple"
      :collapse-tags="collapse_tags"
      :size="size"
      :disabled="disabled"
      @change="selectChange"
    >
      <el-option :value="mineStatusValue" style="height: auto">
        <el-tree
          :data="options"
          :show-checkbox="show_checkbox"
          :node-key="node_key"
          ref="selectTree"
          :accordion="accordion"
          :props="checktreeselectprops"
          :default-expanded-keys="defaultExpandedKey"
          :default-checked-keys="defaultCheckedKey"
          :highlight-current="highlight_current"
          :dufault-expand-all="default_expand_all"
          @check-change="handleCheckChange"
        ></el-tree>
      </el-option>
    </el-select>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      labelnames: this.checktreeselectdatas.labelnamelist,
      mineStatus: this.checktreeselectdatas.checktreeidlist,
      labelidlist: [],
      labelnamelist: [],
      mineStatusValue: [],
      defaultExpandedKey: [],
      defaultCheckedKey: [],
      options: this.checktreeselectdatas.checktreeselect_data,
      accordion: this.checktreeselectdatas.accordion,
      clearable: this.checktreeselectdatas.clearable,
      size: this.checktreeselectdatas.size,
      disabled: this.checktreeselectdatas.disabled,
      highlight_current: this.checktreeselectdatas.highlight_current, //高亮显示节点
      default_expand_all: this.checktreeselectdatas.default_expand_all, //默认展开全部节点
      show_checkbox: this.checktreeselectdatas.show_checkbox,
      multiple: this.checktreeselectdatas.multiple,
      collapse_tags: this.checktreeselectdatas.collapse_tags,
      node_key: this.checktreeselectdatas.node_key,
    };
  },
  props: {
    // 配置项
    checktreeselectprops: {
      type: Object,
      default: {
        value: "RUID", // ID字段名
        label: "label", // 显示名称
        children: "children", // 子级字段名
      },
    },
    checktreeselectdatas: {
      type: Object,
      default() {
        return this.checktreeselectdatas;
      },
    },
  },
  methods: {
    selectChange(e) {
      for (let i = 0; i < e.length; i++) {
        this.getidbyname(this.options, e[i]);
      }
      this.mineStatus = this.labelidlist;
      this.$refs.selectTree.setCheckedNodes(this.mineStatus); // 设置默认选中
      this.labelidlist = [];
    },
    getidbyname(data, name) {
      for (let j = 0; j < data.length; j++) {
        if (name == data[j].name) {
          this.labelidlist.push(data[j].RUID);
          name = "";
        }
        if (data[j].children) {
          this.getidbyname(data[j].children, name);
        }
      }
    },
    handleCheckChange() {
      let res = this.$refs.selectTree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      let arrLabel = [];
      let arr = [];
      let ruids = [];
      res.forEach((item) => {
        arrLabel.push(item.name);
        ruids.push(item.RUID);
        arr.push(item);
      });

      this.mineStatusValue = arr;
      this.mineStatus = arrLabel;
      this.labelnames = this.mineStatus;
      this.$emit("get-check-value", ruids);
    },
    getCheckedKeys() {},
    // 初始化值
    initHandle() {
      if (this.mineStatus) {
        this.$refs.selectTree.setCurrentKey(this.mineStatus); // 设置默认选中
        this.defaultExpandedKey = this.mineStatus; // 设置默认展开
        this.defaultCheckedKey = this.mineStatus;
      }
      this.initScroll();
    },
    // 初始化滚动条
    initScroll() {
      this.$nextTick(() => {
        let scrollWrap = document.querySelectorAll(
          ".el-scrollbar .el-select-dropdown__wrap"
        )[0];
        let scrollBar = document.querySelectorAll(
          ".el-scrollbar .el-scrollbar__bar"
        );
        scrollWrap.style.cssText =
          "margin: 0px; max-height: none; overflow: hidden;";
        scrollBar.forEach((ele) => (ele.style.width = 0));
      });
    },
  },
  watch: {
    checktreeselectdatas: {
      handler(newval, oldval) {
        this.checktreeselectdatas = newval;
        this.labelnames = this.checktreeselectdatas.labelnamelist; // 初始值
        this.mineStatus = this.checktreeselectdatas.checktreeidlist;
        this.options = this.checktreeselectdatas.checktreeselect_data;
        this.accordion = this.checktreeselectdatas.accordion;
        this.clearable = this.checktreeselectdatas.clearable;
        this.size = this.checktreeselectdatas.size;
        this.disabled = this.checktreeselectdatas.disabled;
        this.default_expand_all = this.checktreeselectdatas.default_expand_all;
        this.highlight_current = this.checktreeselectdatas.highlight_current;
        this.show_checkbox = this.checktreeselectdatas.show_checkbox;
        this.multiple = this.checktreeselectdatas.multiple;
        this.collapse_tags = this.checktreeselectdatas.collapse_tags;
        this.node_key = this.checktreeselectdatas.node_key;
        this.initHandle();
      },
      deep: true,
    },
  },
  mounted() {
    this.initHandle();
  },
};
</script>
<style>
.span-ellipsis{
  line-height: 30px;
}
</style>